<template>
    <edit-dialog :centerDialogVisible="visible" :tilte="type === 1 ? '查看' : '编辑'" :default-button="false"
        @Cancel="handleCancel" :width="width">
        <template #content>
            <div>
                <el-form ref="maintenanceRef" :model="editForm" :rules="rules" label-width="110px" :inline="true">
                    <!-- 紧急状况 -->
                    <el-form-item label="紧急状况" prop="urgency">
                        <el-select coordinateholder="请选择" v-model="editForm.urgency" style="width: 260px"
                            :disabled="type === 1 ? true : false">
                            <el-option v-for="item in urgency" :label="item.label" :value="item.value" :key="item.value" />
                        </el-select>
                    </el-form-item>
                    <!-- 维修名称 -->
                    <el-form-item label="维修名称" prop="repName">
                        <el-input :disabled="type === 1 ? true : false" placeholder="请输入维修名称" style="width: 260px"
                            v-model="editForm.repName" show-word-limit></el-input>
                    </el-form-item>
                    <!-- 设备类型 -->
                    <el-form-item label="设备类型" prop="eqptTypeId">
                        <el-tree-select v-model="editForm.eqptTypeId" check-strictly :data="eqptTypeId"
                            :render-after-expand="false" style="width: 260px" @change="geteqpttypeId"
                            :disabled="type === 1 ? true : false" />
                    </el-form-item>
                    <!-- 其他设备类型 -->
                    <el-form-item label="其他设备类型" :prop="editForm.eqptTypeId == '0' ? 'eqptTypeOtr' : ''">
                        <el-input style="width: 260px" placeholder="当设备类型为其他时,必填" v-model="editForm.eqptTypeOtr"
                            show-word-limit :disabled="editForm.eqptTypeId === '0' && props.type === 2 ? false : true">
                        </el-input>
                    </el-form-item>
                    <br>
                    <!-- 设备编号 -->
                    <el-form-item label="设备编号" prop="eqptCode">
                        <el-input v-if="editForm.eqptTypeId == '0'" style="width: 260px" placeholder="请输入编号" show-word-limit
                            v-model="editForm.eqptCode" :disabled="type === 1 ? true : false">
                        </el-input>
                        <el-select :disabled="type === 1 ? true : false" v-else placeholder="请选择设备编号"
                            v-model="editForm.eqptCode" style="width: 260px" @change="getCoses">
                            <el-option v-for="item, in eqptCodes" :label="item.label" :value="item.value" :key="item" />
                        </el-select>
                    </el-form-item>
                    <!-- 设备型号 -->
                    <el-form-item label="设备型号" prop="eqptModel">
                        <el-select placeholder="根据所选设备自动填充或手动输入" v-model="editForm.eqptModel" style="width: 260px" disabled
                            v-if="editForm.eqptTypeId !== '0'">

                        </el-select>
                        <el-input :disabled="editForm.eqptTypeId === '0' && props.type === 2 ? false : true"
                            style="width: 260px" show-word-limit v-model="editForm.eqptModel" placeholder="请输入设备型号" v-else>
                        </el-input>
                    </el-form-item>
                    <!-- 供应商 -->
                    <el-form-item label="供应商" prop="eqptSupplier">
                        <el-select placeholder="根据设备位置自动填充" v-model="editForm.eqptSupplier" style="width: 260px" disabled
                            v-if="editForm.eqptTypeId !== '0'">

                        </el-select>
                        <el-input :disabled="editForm.eqptTypeId === '0' && props.type === 2 ? false : true"
                            style="width: 260px" placeholder="请输入设备型号" show-word-limit v-model="editForm.eqptSupplier"
                            v-else>
                        </el-input>
                    </el-form-item>
                    <!-- 航站楼 -->
                    <el-form-item label="航站楼" prop="terminal">
                        <el-radio-group class="ml-4" v-model="editForm.terminal" :disabled="type === 1 ? true : false">
                            <el-radio v-for="item in terminals" :label="item.value" size="small">{{ item.label }}</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <!-- 地点 -->
                    <el-form-item label="地点" prop="coordinate" style="position: relative;" disabled :rules="[
                        {
                            required: true,
                            trigger: 'change',
                            validator: getValodatorplanAcceptTime,
                        },
                    ]">
                        <el-input style="width: 260px" @blur="coordinateInput" disabled placeholder="根据所选设备自动填充或地图点选"
                            v-model="coordinateview">
                        </el-input>
                        <img class="coordinate_img" src="@/assets/images/point.png" @click.stop="mapcoor()" alt="">
                    </el-form-item>

                    <!-- 楼层 -->
                    <el-form-item label="楼层" prop="eqptFloor">
                        <el-select placeholder="请选择楼层" style="width: 260px" v-model="editForm.eqptFloor"
                            :disabled="type === 1 ? true : false">
                            <el-option v-for="item in eqptFloors" :label="item.label" :value="item.value"
                                :key="item.value" />
                        </el-select>
                    </el-form-item>
                    <!-- 区域 -->
                    <el-form-item label="区域" prop="region">
                        <el-input v-model="editForm.region" placeholder="根据所选设备自动填充或手动输入" style="width: 260px"
                            :disabled="props.type != 1 && editForm.eqptTypeId === '0' ? false : true"></el-input>
                    </el-form-item>
                    <!-- 问题类型 -->
                    <el-form-item label="问题类型" prop="problemId">
                        <el-select placeholder="请选择" style="width: 655px" v-model="editForm.problemId"
                            :disabled="type === 1 ? true : false">
                            <el-option v-for="item in problemId" :label="item.label" :value="item.value"
                                :key="item.value" />
                        </el-select>
                    </el-form-item>
                    <!-- 问题描述 -->
                    <el-form-item label="问题描述" prop="problemDesc">
                        <el-input style="width: 655px;" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"
                            show-word-limit maxlength="500" v-model="editForm.problemDesc" placeholder="请输入问题描述"
                            :disabled="props.type === 1 ? true : false">
                        </el-input>
                    </el-form-item>
                    <!-- 图片 -->
                    <!-- action="/fast/uploadFile" -->
                    <el-form-item label="图片：" class="upload-img" prop="files"
                        :class="props.type === 1 ? 'div' : isfilelist == true ? 'div' : ''">
                        <el-upload :disabled="type === 1 ? true : false" ref="uploadRef" v-model:file-list="filelist"
                            :action="baseGeneralPath + '/fast/uploadFile'" list-type="picture-card"
                            :class="{ hide: hideUpload }" :on-preview="handlePictureCardPreview"
                            :on-success="handlerUploadSuccess" :on-exceed="handleExceed"
                            :before-upload="handlerBeforeUpload" :on-remove="handleRemove" limit="10">
                            <el-icon>
                                <Plus />
                            </el-icon>
                        </el-upload>
                        <el-dialog align-center width="auto" center v-model="dialogVisible" :action="baseUrlConfig.businessBaseUrl+'/fast/uploadFile'">
                            <div>
                                <img w-full :src="dialogImageUrl" class="dialogImageUrlimg" alt="Preview Image" />
                            </div>
                        </el-dialog>
                    </el-form-item>
                    <!-- 归属问题 -->
                    <el-form-item label="问题归属" prop="organType">
                        <div class="my-4 flex items-center text-sm">
                            <el-radio-group :disabled="type === 1 ? true : false" class="ml-4" v-model="editForm.organType"
                                @change="organTypes">
                                <el-radio label="1" size="small">内部单位</el-radio>
                                <el-radio label="2" size="small">外部单位</el-radio>
                            </el-radio-group>
                        </div>
                    </el-form-item>
                    <!-- 上报至 -->
                    <!-- multiple -->
                    <el-form-item label="上报至" prop="organId" style="margin-left: 100px;">
                        <el-tree-select :disabled="type === 1 ? true : false" placeholder="请选择" default-expand-all
                            style="width: 240px" v-model="editForm.organId" :data="organId" :render-after-expand="false" />
                    </el-form-item>



                    <!-- 期望修复时间 -->
                    <el-form-item label="期望修复时间" prop="expRepTime">
                        <!-- <el-date-picker v-model="editForm.expRepTime" type="datetime" placeholder="请选择期望修复时间"
                            style="width: 255px" @change="time" :disabled="type === 1 ? true : false" /> -->

                        <el-input-number @change="expRepTime" v-model="numTime" placeholder="请选择期望修复时间"
                            :disabled="type === 1 ? true : false"></el-input-number>
                        <el-select v-model="times" placeholder="Select" style="width: 80px;" @change="expRepTime"
                            :disabled="type === 1 ? true : false">
                            <el-option label="天" value="D" />
                            <el-option label="小时" value="H" />
                        </el-select>



                    </el-form-item>

                    <!-- 维修方式-->
                    <el-form-item label="维修方式" prop="repType">
                        <el-radio-group class="ml-4" v-model="editForm.repType" :disabled="type === 1 ? true : false">
                            <el-radio label="1" size="small">{{ '后续维修' }}</el-radio>
                            <el-radio label="2" size="small">{{ '立行立改' }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <!-- 备注 -->
                    <el-form-item label="备注" prop="remarks">
                        <el-input :disabled="type === 1 ? true : false" style="width: 655px;" type="textarea"
                            :autosize="{ minRows: 2, maxRows: 4 }" show-word-limit maxlength="500"
                            v-model="editForm.remarks"> </el-input>
                    </el-form-item>
                    <!-- 驳回人 -->
                    <!-- 备注 -->
                    <el-form-item label="驳回人" v-if="data.repApplyState === '03'">
                        <el-input disabled style="width: 260px;" v-model="overrule.name"> </el-input>
                    </el-form-item>
                    <!-- 驳回时间 -->
                    <el-form-item label="驳回时间" v-if="data.repApplyState === '03'">
                        <el-input disabled style="width: 255px;" v-model="overrule.createTime"> </el-input>
                    </el-form-item>
                    <!-- 驳回意见-->
                    <el-form-item label="驳回意见" v-if="data.repApplyState === '03'">
                        <el-input disabled style="width: 655px; " type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"
                            show-word-limit maxlength="500" v-model="overrule.reject"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </template>

        <template #custom>
            <span class="dialog-footer">
                <el-button class="buttonCancel" @click="handleCancel"> {{ props.type == 2 ? '取消' : '返回' }}</el-button>
                <el-button type="primary" class="btn-ok" v-if="props.type === 2" @click="handleEditSubmit(maintenanceRef)"
                    :loading="loading">确定</el-button>
            </span>
        </template>
    </edit-dialog>
    <!-- 地图弹框 -->
    <map-item :visible="mapitemDialogVisible" :type="props.type" @cancel="cancel" @showAdd="handleShowAdd"
        @confirm="mapConfirm" :place="place"></map-item>
</template>
<!-- :centerDialogVisible="visible" -->
<script setup lang="ts">
import editDialog from '@/components/editDialog/index.vue'
import { ref, reactive, watch, provide, onBeforeMount } from 'vue'
import { useStore } from 'vuex'
import mapItem from './map.vue'
import { deleteFile } from '@/api/common'
import { ElMessage, dayjs } from 'element-plus'
import { getProblem, getdevive, getcompanys, editrepair, repairReject } from '@/api/requst/management'
import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
import { baseUrlConfig } from '@/config/config'
import { dataType } from 'element-plus/es/components/table-v2/src/common'

const place = ref({ longitude: '', latitude: '' })
const baseGeneralPath = baseUrlConfig.businessBaseUrl
const times = ref('D')
const numTime = ref(0)
const width = ref('900px')
const emit = defineEmits(['cancel', 'submit', 'showAdd'])
const loading = ref(false)
const $store = useStore()
const goodsFile = ref<Array<any>>([])
const maintenanceRef = ref()
let filelist = ref<any[]>([])
const hideUpload = ref(false)
let dialogImageUrl = ref('')

let coordinates = ref([])
let dialogVisible = ref(false)
const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
    info: {
        type: Object,
        default: () => null,
    },
    data: {
        type: Object,
        default: () => null
    },
    type: {
        type: Number,
        default: null
    }
})



// 参数
const editForm = reactive({
    //紧急状况
    urgency: '',
    // 设备类型
    eqptTypeId: '',
    // 其他设备类型
    eqptTypeOtr: '',
    // 设备编号
    eqptCode: '',
    // 设备型号
    eqptModel: '',
    // 供应商
    eqptSupplier: '',
    // 地点
    coordinate: {},
    // 区域
    region: '',
    // 问题类型
    problemId: null,
    // 问题描述
    problemDesc: '',
    // 图片
    files: [],
    // 归属问题
    organType: '1',
    // 上报至
    organId: '',
    // repld: null,
    // 备注
    remarks: '',
    // 维修名称
    repName: '',
    //楼层
    eqptFloor: '',
    // 航站楼
    terminal: '',
    // 期望修复时间
    expRepTime: '',
    //维修方式
    repType: '',
    //登录人信息
    mender: {
        id: "",
        name: "",
        organId: "",
        organName: "",
    },
    // 保修单号
    repId: ''
})

// 规则校验
const rules = reactive({
    // urgency: [
    //     { required: true, message: '请选择紧急状况', trigger: 'blur' },
    // ],
    eqptTypeId: [
        { required: true, message: '请选择设备类型', trigger: 'blur' },
    ],
    eqptCode: [
        { required: true, message: '请输入设备编号', trigger: 'blur' },
        { max: 50, message: '最大长度50', trigger: 'blur' }
    ],
    // coordinate: [
    //     { required: true, message: '请输入地点', trigger: 'blur' },
    //     { max: 50, message: '最大长度50', trigger: 'blur' }
    // ],
    region: [
        { required: true, message: '请输入区域', trigger: 'blur' },
    ],
    problemId: [
        { required: true, message: '请选择问题类型', trigger: 'change' },
    ],
    problemDesc: [
        { required: true, message: '请输入问题描述', trigger: 'blur' },
    ],
    files: [
        { required: true, message: '请选择图片', trigger: 'change' },
    ],
    organType: [
        { required: true, message: '请选择问题归属', trigger: 'change' },
    ],
    organId: [
        { required: true, message: '请选择上报', trigger: 'change' },
    ],
    eqptTypeOtr: [
        { required: true, message: '请输入设备类型', trigger: 'blur' },
        { max: 50, message: '最大长度50', trigger: 'blur' }
    ],
    eqptModel: [
        { max: 50, message: '最大长度50', trigger: 'blur' }
    ],
    eqptSupplier: [
        { max: 50, message: '最大长度50', trigger: 'blur' }
    ],
    repName: [
        { required: true, message: '请输入维修名称', trigger: 'blur' },
        { max: 50, message: '最大长度50', trigger: 'blur' }
    ],
    eqptFloor: [
        { required: true, message: '请选择楼层', trigger: 'change' },
    ],
    terminal: [
        { required: true, message: '请选择航站楼', trigger: 'change' },
    ],
    expRepTime: [
        { required: true, message: '请选择期望修复时间', trigger: 'change' },
    ],
    repType: [
        { required: true, message: '请选择维修方式', trigger: 'change' },
    ]
})


const getValodatorplanAcceptTime = (rule: any, value: any, callback: any) => {
    if (coordinateview.value == '') {
        callback('地点不能为空')
    }
    if (String(coordinateview.value).length >= 50) {
        callback('最大长度50')
    }
    if (!coordinateview.value) {
        callback()
    }
    callback()
}




//期望修复时间
const expRepTime = () => {
    editForm.expRepTime = ''
    if (times.value == 'D') {
        editForm.expRepTime = dayjs(dayjs(props.data.createTime) + (numTime.value * 24 * 60 * 60 * 1000)).format("YYYY-MM-DD HH:mm:ss")
    } else if (times.value == 'H') {
        editForm.expRepTime = dayjs(dayjs(props.data.createTime).valueOf() + (numTime.value * 60 * 60 * 1000)).format("YYYY-MM-DD HH:mm:ss")
    }
}

const handleEditSubmit = async (formEl: any) => {
    // 查看
    if (props.type === 1) {
        emit('cancel')
    }
    // 编辑
    if (props.type === 2) {
        if (!formEl) return
        await formEl.validate((valid: any) => {
            if (valid) {

                const res: any = editrepair(editForm)

                if (res) {
                    emit('cancel')
                    ElMessage.success('修改成功')
                }

            }
        })

    }
}


// 地图弹窗是否打开
const mapitemDialogVisible = ref(false)

//弹框点击消失
const cancel = () => {
    mapitemDialogVisible.value = false
}
const handleShowAdd = () => {
    mapitemDialogVisible.value = false
}

//地图获取数据
const mapcoor = () => {
    if (editForm.eqptTypeId === '0' || props.type == 1) {
        mapitemDialogVisible.value = true
    }
}

const coordinateview = ref('')

const mapConfirm = (loc: any) => {
    //编辑设备类型为其他时
    if (props.type != 1) {
        editForm.coordinate = loc
        coordinateview.value = `${editForm.coordinate?.longitude},${editForm.coordinate?.latitude}`
    }
}

//手动输入
const coordinateInput = () => {
    if (coordinateview.value) {
        editForm.coordinate = {
            latitude: coordinateview.value.split(',')[1],
            longitude: coordinateview.value.split(',')[0]
        }
    } else {
        editForm.coordinate = {},
            coordinateview.value = ''
    }
}



//标点回显
watch(() => $store.getters['repair/getCoordinate'], () => {
    // 传的值
    editForm.coordinate = $store.getters['repair/getCoordinate']
    // 显示
    coordinateview.value = `${$store.getters['repair/getCoordinate'].longitude},${$store.getters['repair/getCoordinate'].latitude}`
    //清除数据
    // $store.commit('repair/SET_COOR_DINATE', {})
})


//获取登录信息
const creator = () => {
    const login: any = JSON.parse(localStorage.getItem('CacheState'))
    console.log('login', login.user.userInfo);
    editForm.mender = {
        id: login.user.userInfo.userId,
        name: login.user.userInfo.name,
        organId: login.user.userInfo.organId,
        organName: login.user.userInfo.organName,
    }
}

creator()


const overrule = reactive({
    name: '',
    createTime: '',
    reject: ''
})

watch(() => props.data, () => {
    editForm.eqptTypeOtr = props.data.eqptTypeOtr
    editForm.urgency = props.data.urgency
    editForm.eqptTypeId = props.data.eqptTypeId
    editForm.eqptCode = props.data.eqptCode
    editForm.eqptModel = props.data.eqptModel
    editForm.eqptSupplier = props.data.eqptSupplier
    editForm.coordinate = props.data.coordinate
    editForm.region = props.data.region
    editForm.problemId = props.data.problemId
    editForm.problemDesc = props.data.problemDesc
    // editForm.files = props.data.files
    editForm.organType = props.data.organType
    editForm.organId = props.data.organId
    editForm.remarks = props.data.remarks
    editForm.repId = props.data.repId
    //经纬度
    place.value.longitude = props.data.coordinate?.longitude
    place.value.latitude = props.data.coordinate?.latitude
    //期望修复时间
    editForm.expRepTime = props.data.expRepTime
    if (times.value == 'D') {
        numTime.value = Math.floor((dayjs(props.data.expRepTime).valueOf() - dayjs(props.data.createTime).valueOf()) / 24 / 60 / 60 / 1000)
    }
    if (Math.floor((dayjs(props.data.expRepTime).valueOf() - dayjs(props.data.createTime).valueOf()) / 24 / 60 / 60 / 1000) < 1) {
        times.value = 'H'
        numTime.value = Math.floor((dayjs(props.data.expRepTime).valueOf() - dayjs(props.data.createTime).valueOf()) / 60 / 60 / 1000)
    }
    editForm.terminal = props.data.terminal
    editForm.eqptFloor = props.data.eqptFloor
    editForm.repName = props.data.repName
    editForm.repType = props.data.repType
    //地点回显
    coordinateview.value = `${props.data.coordinate?.longitude},${props.data.coordinate?.latitude}`
    //查看
    console.log(props.data, 'props.data');

    repairReject({ repApplyState: "02", repId: props.data.repId }).then(res => {
        overrule.reject = res.data[0].nodeContent.reject
        overrule.createTime = res.data[0].createTime
        overrule.name = res.data[0].creator.name

        console.log(res.data[0].nodeContent.reject, '驳回理由');
        console.log(res.data[0].createTime, '驳回时间');
        console.log(res.data[0].creator.name, '驳回驳回人');

    })


    if (editForm.organType === '1') {
        organId.value = $store.getters['user/getAllOrganTree']
        console.log('内部单位');

    }

    editForm.files = props.data.files?.map((item: any) => {
        return {
            enclosureCode: item.enclosureCode,
            enclosureContent: item.enclosureContent,
            enclosureName: item.enclosureName,
            enclosureSuffix: item.enclosureSuffix,
            resourceAddress: item.resourceAddress
        }
    }) || []

    props.data.files.forEach((item: any) => {
        item.url = (useImgurl(item.resourceAddress))
    })
    filelist = props.data.files
})
const useImgurl = (url: string) => {
    const imgUrls = '/general-business'
    if (url.includes('/filePath')) {
        url = url.replace('/filePath', '')
    }
    if (url.includes('/api')) {
        url = url.replace('/api', '')
    }
    if (url.includes('/general-business')) {
        url = url.replace('/general-business', '')
    }
    return imgUrls + url
}
watch(() => editForm.eqptTypeId, async () => {
    //当类型为其他时
    if (editForm.eqptTypeId === '0') {
        await getProblem('').then((res: any) => {

            problemId.value = res.data.map((item: any) => {
                return {
                    label: item.problemType,
                    value: item.problemId

                }
            })

        })

    } else {
        await getProblem(editForm.eqptTypeId).then((res: any) => {
            if (res.code === '1') {
                console.log(res.data);
                problemId.value = res.data.map((item: any) => {
                    return {
                        label: item.problemType,
                        value: item.problemId
                    }
                })
            }
        })
    }
    // 设备编号
    await getdevive(editForm.eqptTypeId).then((res: any) => {
        eqptCodes.value = res.data.map((item: any) => {
            return {
                ...item,
                label: item.eqptCode,
                value: item.eqptCode,
            }
        })

    })
})

// 上报至
let organId = ref([])

watch(() => editForm.organType, () => {
    if (editForm.organType === '1') {
        organId.value = $store.getters['user/getAllOrganTree']
    }
    if (editForm.organType === '2') {
        //上报
        console.log('外部单位');
        getcompanys().then((res: any) => {
            if (res.code === '1') {
                organId.value = res.data.map((item: any) => ({
                    ...item,
                    label: item.companyName,
                    value: item.companyId
                }))
            }
        })

    }

})




//归属问题
const organTypes = () => {
    // console.log(editForm.organType);
    editForm.organId = ''
    if (editForm.organType === '1') {
        organId.value = $store.getters['user/getAllOrganTree']
        console.log('内部单位');
    }
    if (editForm.organType === '2') {
        console.log('外部单位');

        //上报
        getcompanys().then((res: any) => {
            console.log(res, '上报');
            if (res.code === '1') {
                organId.value = res.data.map((item: any) => ({
                    ...item,
                    label: item.companyName,
                    value: item.companyId
                }))
            }
        })
    }

}

// 图片

// 上传前
const handlerBeforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
    console.log(rawFile)
    const fileSuffix = rawFile.name.substring(rawFile.name.lastIndexOf('.') + 1)
    const whiteList = ['jpg', 'png', 'JPG', 'PNG']
    if (whiteList.indexOf(fileSuffix) === -1) {
        ElMessage.error('上传文件类型只能是 jpg,png格式')
        return false
    }
    if (rawFile.size > 10 * 1024 * 1024) {
        ElMessage.error('文件大小只能在10M以内')
        return false
    }
}

const handlePictureCardPreview = (uploadFile: any) => {
    dialogImageUrl.value = useImgurl(uploadFile.resourceAddress)
    dialogVisible.value = true
}
//上传成功
interface FileFace {
    enclosureContent: string
    enclosureName: string
    enclosureSuffix: string
    resourceAddress: string
    enclosureCode: string
}
const delFile = (code: string) => {
    deleteFile(code).then(res => {
        console.log(res)
    })
}
// 超出警告框
const handleExceed: UploadProps['onExceed'] = () => {
    ElMessage.error('上传文件数不能超过10个')
}
const handleRemove: UploadProps['onRemove'] = (uploadFile: any, uploadFiles) => {
    let code = ''
    if (uploadFile.name) {
        code = uploadFile.response?.data?.enclosureCode
    } else {
        code = uploadFile.enclosureCode
        editForm.files = editForm.files.filter(item => item.enclosureCode != code)
    }
    delFile(code)
    hideUpload.value = false
    const values: Array<FileFace> = []
    goodsFile.value.forEach((item, index) => {
        if (item.enclosureCode !== code) {
            values.push(item)
        }
    })
    if (filelist.length < 10) {
        isfilelist.value = false
    }



    goodsFile.value = values
}
const isfilelist = ref(false)
const handlerUploadSuccess: UploadProps['onSuccess'] = (resp, uploadFile, uploadFiles) => {
    // console.log(resp, uploadFile, uploadFiles)  
    if (resp.code === '1') {
        const item: FileFace = {
            enclosureContent: resp.data.enclosureCode,
            enclosureName: resp.data.enclosureName,
            enclosureSuffix: resp.data.enclosureSuffix,
            resourceAddress: resp.data.resourceAddress,
            enclosureCode: resp.data.enclosureCode
        }
        editForm.files.push(item)
    }
    if (filelist.length >= 10) {
        // alert('限制')
        isfilelist.value = true
    }

}





/**
 * 取消
 */
const handleCancel = () => {
    emit('cancel')
}
//设备类型
let eqptTypeId = ref<any[]>([])
//问题类型
let problemId = ref([])

//设备编号
let eqptCodes = ref([])


// 航站楼
let terminals = ref([])
//楼层
let eqptFloors = ref([])

//航站楼
watch(() => $store.getters['repair/getTermianl'], (newVal) => {
    terminals.value = newVal
    //楼层
    eqptFloors.value = newVal[0].children
})
//格式化时间
const time = () => {
    editForm.expRepTime = dayjs(editForm.expRepTime).format('YYYY-MM-DD HH:mm:ss');
    // console.log(addForm.expRepTime);
}



//设备类型

watch(() => $store.getters['repair/getEqptTypes'], (newVal) => {
    eqptTypeId.value = [...newVal, { label: '其他', value: '0' }]
})
// 问题类型
const geteqpttypeId = async () => {
    editForm.coordinate = ''
    coordinateview.value = ''
    editForm.eqptCode = ''
    editForm.eqptModel = ''
    editForm.eqptSupplier = ''
    editForm.region = ''
    editForm.problemDesc = ''
    editForm.eqptTypeOtr = ''
    editForm.problemId = null
    //当类型为其他时
    if (editForm.eqptTypeId === '0') {
        await getProblem('').then((res: any) => {

            problemId.value = res.data.map((item: any) => {
                return {
                    label: item.problemType,
                    value: item.problemId

                }
            })

        })

    } else {
        await getProblem(editForm.eqptTypeId).then((res: any) => {
            if (res.code === '1') {
                console.log(res.data);
                problemId.value = res.data.map((item: any) => {
                    return {
                        label: item.problemType,
                        value: item.problemId
                    }
                })
            }
        })
    }

    // 设备编号
    await getdevive(editForm.eqptTypeId).then((res: any) => {
        console.log(res);
        if (res.code === '1') {
            eqptCodes.value = res.data.map((item: any) => {
                return {
                    ...item,
                    label: item.eqptId,
                    value: item.eqptCode,
                }
            })
        }
    })
}



let filtere = ref<any[any]>([])
const getCoses = () => {
    filtere = eqptCodes.value.filter((item: any) => item.value === editForm.eqptCode)
    //设备型号
    editForm.eqptModel = filtere[0]?.eqptModel
    //地点
    editForm.coordinate = filtere[0]?.coordinate
    // coordinates.value = { label: `${filtere[0].coordinate.longitude},${filtere[0].coordinate.latitude} `, value: filtere[0].coordinate }
    coordinateview.value = `${editForm.coordinate?.longitude},${editForm.coordinate?.latitude}`
    //区域
    editForm.region = filtere[0]?.position || '区域'
    //供应商
    editForm.eqptSupplier = filtere[0]?.supplier
}

//数据
const urgency = ref([
    { label: '非常紧急', value: '1' },
    { label: '一般紧急', value: '2' },
    { label: '一般', value: '3' }
])
</script>

<style scoped lang="less">
.hide {
  /deep/ .el-upload--picture-card {
    display: none;
  }
  .el-list-enter-active,
  .el-list-leave-active {
    transition: all 0s;
  }
  .el-list-enter,
  .el-list-leave-active {
    opacity: 0;
    transform: translateY(0);
  }
}
.upload-img {
  width: 100%;
}
.coordinate_img {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}
.div {
  /deep/.el-upload {
    display: none !important;
  }
}

.dialogImageUrlimg {
    width: 600px;
    height: 550px
}
</style>